<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main{
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let yAxisMonth = ["一分局",
        "二分局",
        "三分局",
        "四分局",
        "五分局",
        "六分局",
        "七分局",
        "八分局",
        "九分局",
        "十分局",
        "十一分局",
        "十二分局"
    ];
    let barData = [
        913,
        894,
        884,
        833,
        785,
        768,
        711,
        653,
        623,
        450,
        411,
        321
    ];
    let barDataTwo = [];
    let coordData2 = [];
    let coordData = [];
    // let chartHeight;
    for (let i = 0; i < barData.length; i++) {
        barDataTwo.push(Math.max.apply(Math, barData) + 5000);
        coordData.push({
            "coord": [Number(barData[i]) - 1, i]
        });
        coordData2.push({
            "coord": [Math.max.apply(Math, barData) + 5000, i]
        })
    }
    // chartHeight = barData.length * 53;
    // $("#ParticipateUnits_Bar").css({
    //     height: chartHeight
    // });
    // let dom = G3("ParticipateUnits_Bar");
    // dom.myChart.resize();
    option = {
        backgroundColor: "#020e25",
        title: {
            text: ''
        },
        legend: null,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function(params) {
                return params[0].name + "<br/>" + '参训人次: ' + params[0].value;
            }
        },
        grid: {
            containLabel: true,
            left: "25%",
            right: "15%",
            top: "10%",
            bottom:"10%",
        },
        yAxis: [{
            data: yAxisMonth,
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#42a5c2',
                },
                formatter: function(value) {
                    return '{Sunny|' + value + '}';
                },
                rich: {
                    value: {
                        lineHeight: 30,
                    },
                    Sunny: {
                        // width: 70,
                        height: 35,
                        padding: [0, 10, 0, 10],
                        align: 'center',
                        backgroundColor: {
                            image: ''
                        }


                    }
                }
            }
        },
            {
                data: yAxisMonth,
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
            },
        ],
        xAxis: [{
            type: "value",
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        }, {
            type: "value",
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        }],
        series: [{
            z: 10,
            xAxisIndex: 0,
            yAxisIndex: 0,
            name: '民警',
            type: 'pictorialBar',
            data: barData,
            barCategoryGap: '80%',
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    textStyle: {
                        fontSize: 12,
                        color: '#00ffff'
                    }
                }
            },
            symbolRepeat: false,
            symbolSize: ['100%', 33],
            symbolOffset: [-16.5, 0],
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#083e6d',
                    },
                        {
                            offset: 0.5,
                            color: '#0272f2',
                            opacity: 0.7
                        }, {
                            offset: 1,
                            color: '#083e6d',
                            opacity: 0.5
                        }
                    ], false),
                }
            },
            symbolClip: true,
            symbolPosition: 'end',
            symbol: 'rect',
            // symbol: 'path://M0 0 L0 60 L225 60 L300 0 Z',
            markPoint: {
                data: coordData,
                symbolSize: [33, 33],
                symbolOffset: [-0.5, 0],
                z: 3,
                label: {
                    normal: {
                        show: false
                    }
                },
                symbolClip: true,
                symbol: 'path://M 300 100 L 100 100 L 100 300 z',

            }
        },
            {
                z: 6,
                xAxisIndex: 1,
                yAxisIndex: 1,
                animation: false,
                name: '民警',
                type: 'pictorialBar',
                data: barDataTwo,
                barCategoryGap: '80%',
                label: {
                    normal: {
                        show: false,
                        position: 'inside',
                        textStyle: {
                            fontSize: 12,
                            color: '#00ffff'
                        }
                    }
                },
                symbolRepeat: false,
                symbolSize: ['100%', 33],
                symbolOffset: [-16.5, 0],
                itemStyle: {
                    normal: {
                        color: '#00abc5',
                        opacity: 0.085
                    }
                },
                symbolClip: true,
                symbol: 'rect',
                markPoint: {
                    data: coordData2,
                    symbolSize: [33, 33],
                    symbolOffset: [-0.5, 0],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00abc5',
                            opacity: 0.085
                        }
                    },
                    symbolClip: true,
                    symbol: 'path://M 300 100 L 100 100 L 100 300 z',
                    // animationDelay:100
                    // animationDuration:1200
                    // animation:false
                    // animationDurationUpdate :1000
                }
            },
        ]
    };
    myChart.setOption(option);
</script>
